<template>
  <div class="body-container layout-padding">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-tree ref="orgTree" :data="state.treeData" node-key="id" :expand-on-click-node="false" default-expand-all  highlight-current @node-click="treeClick"></el-tree>
      </el-col>
      <el-col :span="20">
        <User :key="'user' + state.activeOrgId" :orgId="state.activeOrgId"></User>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="userRole">
import request from '/@/utils/request';
import {reactive, ref, onMounted, defineAsyncComponent} from "vue";

const User = defineAsyncComponent(() => import('/@/views/sys/user/user.vue'));

const state = reactive({
  treeData :[],
  activeOrgId:0,
})
const loadOrgTree = () =>{
  request({
    url: '/sys/org/orgtreedata',
    data: {orgId : 1}
  }).then(res => {
    const { data } = res
    state.treeData = data
    if(state.treeData.length > 0){
      state.activeOrgId = parseInt(state.treeData[0].id)
    }
  })
}
const treeClick = (treeNode)=>{
  state.activeOrgId = parseInt(treeNode.id)
}
onMounted(()=>{
  loadOrgTree();
})
</script>
<style scoped>

</style>
